<template>
  <div class="app-container app-container-next">
    <el-card class="box-card" shadow="false">
      <div slot="header" class="clearfix"> 修改密码</div>
      <el-row>
        <el-col :span="18">
          <el-form ref="userForm" :model="user" :rules="rules" label-width="120px">
            <el-form-item label="原密码" prop="password">
              <el-input type="password" v-model="user.password" placeholder="请输入原密码" autocomplete="off" show-password/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" v-model="user.newPassword" placeholder="请输入新密码" autocomplete="off"
                        show-password/>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPass">
              <el-input type="password" v-model="user.confirmPass" placeholder="请再输入新密码" autocomplete="off"
                        show-password/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('userForm')" :loading="submitLoading">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { updatePassword } from '@/api/system';
export default {
    name: 'update-password',
    data () {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.user.newPassword) {
                callback(new Error('两次输入密码不一致,请重新输入!'));
            } else {
                callback();
            }
        };
        return {
            user: {password: '', newPassword: '', confirmPass: ''},
            rules: {
                password: [
                    {required: true, message: '请输入原密码', trigger: 'blur'},
                    // eslint-disable-next-line standard/object-curly-even-spacing
                    {type: 'string', pattern: /^(?![A-Za-z]+$)(?![A-Z\d]+$)\S{8,}$/, message: '密码最少8位,并且至少包含1个字母和1个数字', trigger: 'blur' }
                ],
                newPassword: [
                    {required: true, message: '请输入新密码', trigger: 'blur'},
                    // eslint-disable-next-line standard/object-curly-even-spacing
                    {type: 'string', pattern: /^(?![A-Za-z]+$)(?![A-Z\d]+$)\S{8,}$/, message: '密码最少8位,并且至少包含1个字母和1个数字', trigger: 'blur' }
                ],
                confirmPass: [
                    {required: true, message: '请再次输入新密码', trigger: 'blur'},
                    // eslint-disable-next-line standard/object-curly-even-spacing
                    {type: 'string', pattern: /^(?![A-Za-z]+$)(?![A-Z\d]+$)\S{8,}$/, message: '密码最少8位,并且至少包含1个字母和1个数字', trigger: 'blur' },
                    {validator: validatePass, trigger: 'blur'}
                ]
            },
            submitLoading: false
        };
    },
    methods: {
        onSubmit (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submitLoading = true;
                    let params = {password: md5(this.user.password), newPassword: md5(this.user.newPassword)};
                    updatePassword(params).then(res => {
                        if (res.code === '200') {
                            this.submitLoading = false;
                            this.$message({type: 'success', message: '密码修改成功'});
                            this.$store.dispatch('LogOut').then(() => {
                                this.submitLoading = false;
                                this.$router.push({ path: '/login' });
                            });
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    },
    mounted () {}
};
</script>
